<template>
  <div class="text-line-height">
    <div class="crumbs-box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/content/list?tabsName=Design' }">内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>教学设计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="listData" class="margin30">
      <div class="block-height">
        <div class="fl text-line-height">
          <div class="fl fs-14">
            <el-tag v-if="listData.baseInfo.original">原创</el-tag>
            <el-tag v-else>转载</el-tag>
          </div>
          <div class="fl marginL10 fs-22 fw">{{ listData.baseInfo.title }}</div>
        </div>
        <div class="fr">
          <el-button type="primary" plain @click="journal">查看操作日志</el-button>
          <el-button v-if="listData.baseInfo.original" @click="getUpdateOriginal(false)">标记为转载</el-button>
          <el-button v-else @click="getUpdateOriginal(true)">保持原创</el-button>

          <el-button type="primary" @click="revise">修改</el-button>
          <el-button
            v-if="listData.baseInfo.status === 'OK'"
            type="warning"
            size="medium"
            @click="getVerify('VIOLATION')"
          >违规</el-button>

          <el-button
            v-if="listData.baseInfo.status === 'VIOLATION'"
            type="warning"
            size="medium"
            @click="getVerify('OK')"
          >取消违规</el-button>

          <el-button type="danger" @click="getPersonPrepareLessonDelete">删除</el-button>
        </div>
      </div>
      <div class="marginL10">
        <div>
          <div>
            <el-avatar class="avatar-size" :src="listData.baseInfo.user.avatarUrl" />
            <span>{{ listData.baseInfo.user.name }}</span>
          </div>
        </div>
        <div>
          <span class="fs-14">{{ listData.baseInfo.grade }}</span>
          <span class="fs-14">{{ listData.baseInfo.subject }}</span>
          <span class="fs-14">{{ listData.baseInfo.grade }}</span>
          <span class="fs-14">{{ listData.baseInfo.term }}</span>
          <span class="fs-14">第{{ listData.baseInfo.classTime }}课</span>
          <span class="fs-14 marginL10 color-gray">{{ listData.baseInfo.createTime }}</span>
        </div>
        <ul class="programme">
          <li
            v-for="(item, index) in listData.resList"
            :key="index"
            class="line-height30"
            :class="index === programmeInx ? 'active' : ''"
            @click="programmeClick(index)"
          >{{ item.TeachingDesignName }}方案</li>
          <!-- <el-button>方案二</el-button> -->
        </ul>
        <div class="marginT10">
          <el-tabs v-model="classHourInx" @tab-click="classHourClick">
            <el-tab-pane
              v-for="(item, index) in listData.resList[programmeInx].resList"
              :key="index"
              :label="'课时' + (index + 1)"
              :name="index + ''"
            >
              <ClassContent
                v-if="classHourInx === index+''"
                :list="listData"
                :programme-inx="programmeInx"
                :class-hour-inx="classHourInx"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <Comment
        :list="listData"
        :sub-id="listData.resList[programmeInx].id"
        tabs-name="second"
        sub-type="PREPARE_LESSON"
        :count-comment="listData.resList[programmeInx].countComment"
        :count-share="listData.resList[programmeInx].countShare"
        :count-thumb="listData.resList[programmeInx].countThumb"
        style="margin-left: 14%;"
      />
    </div>

    <Journal :dialog-visible="journalVisible" :dialog-obj="journalObj" @Callback="getJournalCall" />
  </div>
</template>

<script>
import { ClassContent } from './classContent';
import Journal from '@/components/Journal/index';
import { getDesignDetail, personPrepareLessonDelete, updateOriginal } from '@/api/content';
import Comment from '@/components/Comment/index';
import { verify } from '@/api/activity';
export default {
  name: 'TeachingDetail',
  components: {
    ClassContent,
    Comment,
    Journal
  },
  data () {
    return {

      programmeInx: 0, // 方案
      classHourInx: 0, // 课时

      listData: null,

      journalVisible: false,
      journalObj: {
        sysEnums: null,
        targetId: null,
        userId: null
      }
      // listData: {
      //   baseInfo: {
      //     title: null,
      //     grade: null,
      //     user: {
      //       avatarUrl: null,
      //       name: null
      //     }
      //   },
      //   resList: [
      //     {
      //       countShare: 0,
      //       commentList: null
      //     }
      //   ]
      // }
    };
  },
  created () {
    this.init();
  },
  methods: {
    // 标记转载/原创
    getUpdateOriginal (status) {
      updateOriginal({
        original: status,
        teachingDesignId: this.$route.query.param
      }).then(res => {
        this.listData.baseInfo.original = status;
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      });
    },
    // 日志
    journal () {
      this.journalObj = {
        sysEnums: [],
        targetId: this.$route.query.param,
        userId: null
      };
      this.journalVisible = true;
    },
    getJournalCall (obj) {
      this.journalVisible = obj;
    },
    // 修改
    revise () {
      this.$router.push({
        path: '/content/teachingEditOrAdd',
        query: { param: this.$route.query.param }
      });
    },
    // 审核 违规/取消违规
    getVerify (status) {
      verify({
        status: status,
        teachingDesignId: this.$route.query.param,
        msg: ''
      }).then(res => {
        this.listData.baseInfo.status = status;
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      });
    },

    // 删除详情
    getPersonPrepareLessonDelete () {
      const msg = '确认是否删除该详情！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          personPrepareLessonDelete(this.listData.baseInfo.id).then(res => {
            this.$router.push({
              path: '/content/list',
              params: {
                tabsName: 'Design'
              }
            });
          });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
    },
    init () {
      getDesignDetail(this.$route.query.param)
        .then(res => {
          const data = res.data;
          console.log(res);
          this.listData = data;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    programmeClick (index) {
      // console.log(tab, event);
      // console.log('当前tab索引:', tab.index, tab.label, tab.name);
      this.programmeInx = index;
      this.classHourInx = '0';
      // console.log('this.programmeInx:', this.classHourInx);
    },
    classHourClick (tab, event) {
      // console.log(tab, event);
      // console.log('当前tab索引:', tab.index, tab.label, tab.name);
      this.classHourInx = tab.index;
      // console.log('this.classHourInx:', this.classHourInx);
    }
  }
};
</script>

<style scoped lang="scss">
.el-button {
  margin-left: 10px;
}
.block-height {
  height: 40px;
}
.text-line-height {
  line-height: 40px;
}
.avatar-size {
  width: 40px;
  height: 40px;
}
.text-line-height-30 {
  line-height: 30px;
}
.el-card-size {
  width: 700px;
}
.img-size {
  width: 100px;
  height: 100px;
}
.el-row-size {
  width: 700px;
  height: 100px;
}
.text-indent {
  text-indent: 50px;
}
.el-tab-pane-size {
  height: 700px;
  overflow: auto;
}

.programme {
  display: flex;
  li {
    width: 120px;
    background-color: #e9f3fe;
    border: 1px solid #a5cff9;
    color: #1e87f0;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
  }
  li:not(:first-child) {
    margin-left: 10px;
  }
  li.active {
    color: #fff;
    background-color: #1e87f0;
    border-color: #1e87f0;
  }
}
</style>
